const VueLoaderPlugin = require('vue-loader/lib/plugin')

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports={
    entry:'./src/main.js',
    output:{
        filename: 'static/js/[name].[hash:8].js', //输出文件的名称
        path: path.join(__dirname, 'dist'), //输出文件的位置
    },
    module:{
        rules:[
            {
                test: /\.js$/,//用正则匹配文件，用require或者import引入的都会匹配到，以及 `.vue` 文件中的 `<script>` 块
                exclude: /node_modules/,//不包含node_modules目录
                loader: 'babel-loader'//用到的加载器
            },
            {
                test:/\.vue$/,
                use:'vue-loader',//这个loader是vue项目必须的加载器，vue-loader会把vue单文件直接转成js
                exclude:/node_modules/,
            },
            {
                test:/\.(jpg|gif|png|jpeg)$/,
                use:{
                    loader:'url-loader',
                    options: {
                        name: 'static/img/[name].[ext]?[hash]',
                        limit:10*1024,
                        esModule: false
                      }
                }
                //图片文件大小小于limit的数值，就会改写成base64直接填入url里面
                //大于限制就会使用file-loader打包成文件输出到static/img目录下，[name]原文件名，[ext]原后缀，[hash]在url上加8位的哈希值避免缓存
                //默认情况下，file-loader生成使用ES模块语法的js模块，导致图片的路径变成了[object module]，所以关闭ES模块语法设为false
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            title:'Vue Project',//生成html文件的标题
            filename:'index.html',//输出的html的文件名称
            url:'/',
            template:'./public/index.html'//html模板所在的文件路径
        })
        
    ]
}